<template>
  <el-menu default-active="1" class="el-menu-demo"
           mode="horizontal" @select="()=>{}">
    <el-sub-menu index="2">
      <template #title>
        <el-input v-model="keyword" style="max-width: 600px" @input="onInput"
                  placeholder="Please input" class="input-with-select">
          <template #append>
            <i class="fa fa-fw fa-search"></i>
          </template>
        </el-input>
      </template>

      <template v-for="(item, idx) in use_tree" :key="idx">
        <el-sub-menu v-if="item.hasChildren()" :index="item.id + ''">
          <template #title><span>{{ item.label }}</span></template>
          <el-menu-item v-for="(ele, i) in item.getChildren()" :index="ele.id + ''">{{ ele.label }}</el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.id + ''">{{ item.label }}</el-menu-item>
      </template>

    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import Bamboo from "@/lang/bamboo/index";
import {ref} from "vue";

const props = defineProps({
    // 数据字典
    list: {type: Array, default: undefined}
})

// 树形工具
const builder = Bamboo.builder();
// 根节点
const keyword = ref('');

// default list
let def;
if(Layers.isNotEmpty(props.list)){
    def = builder
        .setMapper(Bamboo.defaultMapper).setParents(props.list)
        .groupBy().getRoot();
} else {
    def = [];
}
const tree = ref(def);
const use_tree = ref(def);

const onInput = (val) => {
    use_tree.value = this.builder.search(val).getRoot(true);
}
</script>

<style scoped>

</style>